﻿@import '../base/variables';
@import '../mixins/site-margins';

.sh-infogrid {
    $block-padding: 2.75vw;
    @include site-margins($factor: 1.2);
    margin: 0 0 5.5rem 0;
    max-width: 100vw;


    &-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 4rem;

        @media screen and (min-width: $media-screen-m) {
            margin-bottom: 0;
        }

        @media screen and (min-width: $media-screen-xl) {
            margin-bottom: -6rem;
        }

        &:last-child {
            @media screen and (min-width: $media-screen-xl) {
                margin-bottom: 0;
            }
        }
    }

    &-icon {
        color: $color-brand;
        font-size: 6rem;

        @media screen and (min-width: $media-screen-m) {
            font-size: 9.6rem;
        }

        &--padlock {
            font-size: 4.8rem;

            @media screen and (min-width: $media-screen-m) {
                font-size: 7.8rem;
            }
        }
    }

    &-subtitle {
        font-family: Poppins;
        font-size: $font-size-xl;
        font-weight: $font-weight-semibold;
        margin-bottom: 1rem;
        margin-top: 2rem;
    }

    &-text {
        font-family: FiraSans;
        font-size: $font-size-m;
        line-height: $font-size-xxxl;
        max-width: 28rem;

        @media screen and (min-width: $media-screen-m) {
            max-width: 100%;
        }
    }

    &-column {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 0 2rem;

        @media screen and (min-width: $media-screen-s) {
            padding: 0 3.5vw;
        }

        @media screen and (min-width: $media-screen-m) {
            flex-direction: row;
        }

        @media screen and (min-width: $media-screen-xl) {
            flex-direction: row;
            padding: 0;
        }
    }

    &-description {
        text-align: center;

        @media screen and (min-width: $media-screen-m) {
            padding-bottom: 3rem;
            padding-left: $block-padding;
            padding-right: 0;
            text-align: left;
            width: 100vw;
        }

        @media screen and (min-width: $media-screen-xl) {
            width: 23vw;
        }
    }

    &-row:nth-of-type(2n) &-column {
        @media screen and (min-width: $media-screen-m) {
            flex-direction: row-reverse;
            justify-content: flex-end;
        }

        @media screen and (min-width: $media-screen-xl) {
            flex-direction: row;
            justify-content: flex-end;
        }
    }

    &-row:nth-of-type(2n) &-description {
        @media screen and (min-width: $media-screen-m) {
            padding-left: 0;
            padding-right: 2rem;
        }

        @media screen and (min-width: $media-screen-xl) {
            padding-left: $block-padding;
            padding-right: 0;
        }
    }
}
